<script setup lang="ts">
import * as echarts from 'echarts'
// 引入中国地图JSON数据
import chinaJSON from './china.json'
// 注册中国地图
echarts.registerMap('china', chinaJSON)
const charts = ref()
var geoCoordMap = {}
var GZData = []
let chartData = [
  {
    sf: '山东',
    jwd: ' 117.1582, 36.8701',
    sl: 360570.0
  },
  {
    sf: '安徽',
    jwd: ' 117.29, 32.0581',
    sl: 358122.0
  },
  {
    sf: '湖北',
    jwd: ' 114.3896, 30.6628',
    sl: 132600.0
  },
  {
    sf: '浙江',
    jwd: ' 119.5313, 29.8773',
    sl: 48000.0
  },
  {
    sf: '广东',
    jwd: ' 113.12244, 23.009505',
    sl: 31110.0
  },
  {
    sf: '辽宁',
    jwd: ' 123.1238, 42.1216',
    sl: 30500.0
  },
  {
    sf: '四川',
    jwd: ' 103.9526, 30.7617',
    sl: 24684.0
  },
  {
    sf: '福建',
    jwd: ' 119.4543, 25.9222',
    sl: 21063.0
  },
  {
    sf: '黑龙江',
    jwd: '127.9688, 45.368',
    sl: 17500.0
  },
  {
    sf: '西藏',
    jwd: ' 91.117212,29.646922',
    sl: 6120.0
  },
  {
    sf: '新疆',
    jwd: ' 87.617733, 43.792818',
    sl: 6125.0
  },
  {
    sf: '北京',
    jwd: '116.405285, 39.904989',
    sl: 5100.0
  },
  {
    sf: '广西',
    jwd: ' 108.479, 23.1152',
    sl: 5100.0
  },
  {
    sf: '河南',
    jwd: ' 113.4668, 34.6234',
    sl: 5000.0
  },
  {
    sf: '云南',
    jwd: ' 102.712251, 25.040609',
    sl: 5001.0
  },
  {
    sf: '海南',
    jwd: ' 110.33119, 20.031971',
    sl: 5001.0
  },
  {
    sf: '内蒙',
    jwd: ' 111.670801, 40.818311',
    sl: 5001.0
  },
  {
    sf: '台湾',
    jwd: ' 121.509062, 25.044332',
    sl: 5001.0
  },
  {
    sf: '青海',
    jwd: ' 101.4038, 36.8207',
    sl: 1020.0
  }
]
chartData.forEach((item) => {
  let arr = item.jwd.split(',')
  geoCoordMap[item.sf] = [Number(arr[0]), Number(arr[1])]
  GZData.push([{ name: '江西' }, { name: item.sf, value: 90 }])
})
geoCoordMap['江西'] = [115.892151, 28.676493]

var convertData = function (data) {
  //用于转换成需要的特定格式数据
  var res = []
  for (var i = 0; i < data.length; i++) {
    var dataItem = data[i]
    var fromCoord = geoCoordMap[dataItem[0].name]
    var toCoord = geoCoordMap[dataItem[1].name]
    if (fromCoord && toCoord) {
      res.push({
        fromName: dataItem[0].name,
        toName: dataItem[1].name,
        coords: [fromCoord, toCoord]
      })
    }
  }
  return res
}

var series = []
;[['江苏', GZData]].forEach(function (item) {
  series.push(
    {
      name: item[0] + ' Top10',
      type: 'lines',
      zlevel: 1,
      symbol: ['circle', 'circle'],
      symbolSize: 10,
      effect: {
        show: true,
        period: 3, // 特效动画的时间
        trailLength: 0.3, // 特效尾迹的长度。取从 0 到 1 的值，默认为 0.2，数值越大尾迹越长
        // color: '#fff',
        // symbol: planePath, // 特效图形的标记
        // symbolSize: 3,
        symbol: 'arrow', //箭头图标
        symbolSize: 5 //图标大小
      },
      lineStyle: {
        color: function (params) {
          var colorList = ['#F64347', '#04CF68', '#04B4F6', '#E9CC08', '#FB9E19']
          return colorList[params.dataIndex % 5]
        },
        width: 2, //尾迹线条宽度
        opacity: 0.7, //尾迹线条透明度
        curveness: -0.2 //尾迹线条曲直度
      },
      data: convertData(item[1])
    },
    {
      name: item[0] + ' Top10',
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 1,
      rippleEffect: {
        brushType: 'stroke',
        period: 4, //动画时间，值越小速度越快
        scale: 4 //波纹圆环最大限制，值越大波纹越大
      },
      label: {
        show: false,
        position: 'right',
        formatter: '{b}',
        fontSize: 14,
        color: '#fff'
      },
      symbol: 'none',
      data: item[1].map(function (dataItem) {
        return {
          name: dataItem[1].name,
          value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
        }
      })
    }
  )
})

let option = {
  geo: {
    map: 'china',
    aspectScale: 0.8,
    layoutCenter: ['50%', '70%'], //地图位置
    layoutSize: '100%',
    zoom: 1.3, //当前视角的缩放比例
    roam: true, //是否开启平游或缩放
    scaleLimit: {
      // 滚轮缩放的极限控制
      min: 1,
      max: 2
    },
    label: {
      show: true,
      color: '#C6F5FE',
      fontSize: 12
    },
    itemStyle: {
      areaColor: 'RGBA(17, 75, 94, 1)',
      borderColor: 'rgba(152, 234, 255, 1)',
      borderWidth: 0.5,
      shadowColor: 'rgba(59,202,251,0.5)',
      shadowOffsetX: 6, // 折线的X偏移
      shadowOffsetY: 12, // 折线的Y偏移
      shadowBlur: 6, // 折线模糊
      // areaColor: 'RGBA(7, 62, 86, 1)',
      label: {
        color: '#fff'
      }
    },
    // 地图高亮效果
    emphasis: {
      label: {
        fontSize: 20
      }
    },
    regions: [
      {
        name: '南海诸岛',
        itemStyle: {
          areaColor: 'rgba(0, 10, 52, 1)',
          borderColor: 'rgba(0, 10, 52, 1)',
          opacity: 0,
          label: {
            show: false,
            color: '#009cc9'
          }
        },
        label: {
          show: false // 隐藏文字
        }
      }
    ]
  },
  series: series
}
onMounted(() => {
  let myecharts = echarts.init(charts.value)
  // 设置echarts配置项
  myecharts.setOption(option)
})
</script>

<template>
  <div class="box1">
    <div class="charts" ref="charts"></div>
  </div>
</template>

<style lang="scss" scoped>
.box1 {
  margin: 84px, 10px, 10px, 10px;
  .top {
    margin: 10px 0 0 20px;
    .title {
      color: white;
      font-size: 20px;
    }
    .bg {
      width: 100px;
      height: 7px;
      background: url(../images/dataScreen-title.png) no-repeat;
      background-size: 100% 100%;
      margin-top: 10px;
    }
  }
  .charts {
    // width: 100%;
    height: 700px;
    margin: 34px 10px 0px;
  }
}
</style>
